import React from 'react';
import Unsplash from './api/UnSplash'
import SearchBar from './Component/SearchBar';
import ImageList from './Component/ImageList';

export default class App extends React.Component {

    state = { images: [] }



    async onSubmitProp(term) {
        const response = await Unsplash.get("/search/photos", {

            params: {
                query: term
            }

        });
        this.setState({ images: response.data.results });
        console.log(response.data.results);
    }

    render() {

        return (
            <div className="ui container">
                <SearchBar onSubmit={this.onSubmitProp.bind(this)} />
                
                <ImageList image={this.state.images} />              
            </div>
        );
    }

}
